<template>
	<div>
		<el-header id="nav">
		      <el-menu
		        :default-active="activeIndex"
		        mode="horizontal"
		        @select="handleSelect"
		        class="el-menu-demo"
				style="display: flex; align-items: center;"
		      >
				  <div v-show="isMobile" index="hamburger" @click="toggleMobileMenu" style="margin-left: 20px;">
					 <i class="el-icon-menu"></i>
				  </div>
		        <div
				  
		          style="padding: 0; margin-left: 40px; margin-right: 40px; display: inline-block;"
		        >
		          <img
		            src="./assets/logo-small.jpg"
		            alt="Logo"
		            style="height: 40px; cursor: pointer;"
		            @click="homePage"
		          />
		        </div>
		
		        <el-menu-item v-show="!isMobile" index="1">首页</el-menu-item>
		        <el-menu-item v-show="!isMobile" index="2">移动应用与开发竞赛</el-menu-item>
		        <el-menu-item v-show="!isMobile" index="3">人工智能AIGC数字艺术创作竞赛</el-menu-item>
		        <el-menu-item v-show="!isMobile" index="4">工具箱</el-menu-item>
		
		        
		      </el-menu>
		
		      <el-drawer
		        :visible.sync="mobileMenuVisible"
		        direction="ltr"
		        size="80%"
		        :with-header="false"
		        @close="mobileMenuVisible = false"
				style="z-index: 3000;"
				:apend-to-body="true" :modal-append-to-body="false"
		      >
		        <el-menu :default-active="activeIndex" mode="vertical" @select="handleSelect"
				style="z-index: 4002;">
		          <el-menu-item index="1">首页</el-menu-item>
		          <el-menu-item index="2">移动应用与开发竞赛</el-menu-item>
		          <el-menu-item index="3">人工智能AIGC数字艺术创作竞赛</el-menu-item>
		          <el-menu-item index="4">工具箱</el-menu-item>
		        </el-menu>
		      </el-drawer>
		    </el-header>
		<div id="nav-empty"></div>
		<div class="main">
			<router-view></router-view>
		</div>
	</div>

</template>


<style>
	* {
	    margin: 0;
	    padding: 0;
	  }
	  #nav {
	    height: 60px;
	    position: fixed;
	    z-index: 99;
	    width: 100%;
	    padding: 0;
	  }
	  #nav-empty {
	    display: block;
	    width: 100%;
	    height: 60px;
	  }
	  .main {
	    height: calc(100vh - 60px);
	  }
	  .section {
	    height: 100%;
	  }
	  #fullpage .section {
	    text-align: center;
	    font-family: Arial, sans-serif;
	  }
	  .content {
	  }
	  h1,
	  h2 {
	    color: #333;
	  }
	  .section:nth-child(odd) {
	    background-color: #f7f7f7;
	  }
	  .section:nth-child(even) {
	    background-color: #fff;
	  }
	  p {
	    color: #666;
	  }
	  .indent {
	    text-indent: 2rem;
	  }
	  .mt {
	    margin-top: 20px;
	  }
	
	  @media (max-width: 768px) {
	    /* .el-menu-item:not([index="hamburger"]) {
	      display: none;
	    } */
	  }
</style>


<script>
	import 'fullpage.js/dist/fullpage.min.css';
	import fullpage from 'fullpage.js';
	import router from './router'; // 导入路由配置

	export default {
	    name: 'App',
	    data() {
	      return {
	        activeIndex: this.getActiveIndexByRoute(),
	        isMobile: false,
	        mobileMenuVisible: false,
	      };
	    },
	    methods: {
	      homePage() {
	        this.activeIndex = 1;
	        this.handleSelect('1');
	        location.reload();
	      },
	      getActiveIndexByRoute() {
	        switch (this.$route.path) {
	          case '/':
	          case '/home':
	            return '1';
	          case '/contestmobile':
	            return '2';
	          case '/contestaigc':
	            return '3';
	          case '/toolbox':
	            return '4';
	          default:
	            return '1';
	        }
	      },
	      handleSelect(key, keyPath) {
	        let path = '';
	        switch (key) {
	          case '1':
	            path = '/home';
	            break;
	          case '2':
	            path = '/contestmobile';
	            break;
	          case '3':
	            path = '/contestaigc';
	            break;
	          case '4':
	            path = '/toolbox';
	            break;
	        }
	        if (this.$route.path !== path) {
	          router.push(path);
	        }
	      },
	      toggleMobileMenu() {
	        this.mobileMenuVisible = !this.mobileMenuVisible;
	      },
	      checkIsMobile() {
	        this.isMobile = window.innerWidth <= 768;
	      },
	    },
	    mounted() {
			document.title = '萌芽工作室';  
	      this.checkIsMobile();
	      window.addEventListener('resize', this.checkIsMobile);
	    },
	    beforeDestroy() {
	      window.removeEventListener('resize', this.checkIsMobile);
	    },
	  };
</script>
